<template>
	<view style="min-height: 98vh;background: #fff">
		<view>
			<view v-for="(item, index) in message" :key="index" class="list" :class="item.leavingMessageType === 1 ? 'user' : 'system'">
				<view class="data">{{ item.createTime }}</view>
				<view class="list_item">
					<view class="list_content">{{ item.messageContent }}</view>
					<image :src="item.leavingMessageType === 1 ? item.avatar : server" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			message: [],
			server: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/service.png'
		};
	},
	onLoad(e) {
		this.time = e.time;
	},
	mounted() {
		this.messageList();
	},
	methods: {
		messageList() {
			const customerOrStaffId = '1';
			this.message = [];
			http('/api/cusUserInfo/getCusLeavingMessageInfoByCustomerId', { data: { customerOrStaffId: customerOrStaffId, queryTime: this.time }, method: 'GET' }).then(
				result => {
					let data = result.data;
					this.message = data;
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #f7f7f7;
}
.list {
	font-size: 28rpx;
	.data {
		display: flex;
		font-size: 24rpx;
		justify-content: center;
		padding: 32rpx 0 23rpx 0;
		color: rgba(102, 100, 93, 0.5);
	}
	.list_item {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		margin: 0 28rpx;
		image {
			width: 70rpx;
			height: 70rpx;
			flex-shrink: 0;
			border-radius: 50%;
		}
		.list_content {
			background-color: #f39800;
			color: #fff;
			padding: 15rpx 20rpx;
			min-height: 70rpx;
			line-height: 40rpx;
			margin: 0 12rpx;
			border-radius: 12rpx;
			max-width: 75%;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				border: solid 6rpx #f39800;
				transform: rotate(45deg);
				right: -4rpx;
				top: 30rpx;
			}
		}
	}
	&.system {
		background-color: #fff;
		.list_item {
			flex-direction: row-reverse;
			.list_content {
				background-color: #fff;
				color: #66645d;
				&::after {
					display: none;
				}
			}
		}
	}
}
</style>
